<template>
    <div class="login-wrap">
        <div class="login-Container">
            <div class="loginRight" >
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
                    <el-form-item class="el-form-bg">
                        <img src="../../static/images/login-logo.png" alt="">
                    </el-form-item>
                    <el-form-item prop="username" class="el-form-text">
                        <el-input v-model="ruleForm.username" place-holder="请输入用户名" placeholder="username">
                            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password" class="el-form-text">
                        <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
                            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code" class="el-form-code">
                        <el-input v-model="ruleForm.code" placeholder="请输入验证码" >
                            <el-button slot="prepend" icon="el-icon-lx-comment"></el-button>
                        </el-input>
                        <div class="el-form-pic" @click.stop="changeCode">
                            <img :src=src  alt=""  ref="code">
                        </div>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    </div>
                </el-form>
            </div>

        </div>
    </div>
</template>
           
<script>
export default {
  data() {
    return {

        randomStr:"",
        regeister:false,
        src:"../../static/images/code_default.jpg",
        ruleForm: {
            username: '',
            password: '',
            code:""
        },
        rules: {
            username: [
                { required: true, message: '请输入用户名', trigger:'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger:'blur' }
            ]
        }
    };
  },
    methods: {
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if(valid) {                   
                    this.$axios({
                        method: 'post',
                        url: '/index/index/check',
                        data: {
                            value:this.ruleForm.code,
                            random:this.randomStr
                        }
                    }).then((res) => {
                        if(res.data.code == 200) {
                            this.$axios({
                                method:'post',
                                url: '/index/login/index',
                                data: {
                                    account: this.ruleForm.username,
                                    password: this.ruleForm.password,
                                    type: 2
                                }
                            }).then((res) => {
                                if(res.data.code == 200) {
                                    sessionStorage.setItem('rand',res.data.data.rand);
                                    sessionStorage.setItem('ms_username',res.data.data.username);
                                    this.$alert('登录成功','提示',{
                                        callback: active => {
                                            this.$router.push('/Home')
                                        }
                                    })
                                }
                            })
                        }
                    })
                }
            })
        },
        initCode(){
            let that = this;
            this.$axios({
                method: 'get',
                url: '/index/index/captcha',
                params: {
                    random: this.createRanom()
                }
            }).then((res) => {
                that.src=res.request.responseURL;
            })
        },
        createRanom(){
            this.randomStr =''
            var array =['1','2','3','4','5','6','7','8','9','0','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
            for(var i=0;i<4;i++){
                this.randomStr+= array[parseInt(Math.random()*array.length)]
            }
            return (this.randomStr)
        },
        checkCode() {
            this.$axios({
                method: 'post',
                url: '/index/index/check',
                data: {
                    value:this.ruleForm.code,
                    rand:this.randomStr
                }
            }).then((res) => {

            })
        },
        changeCode() {
            this.initCode()
        },
    },
    mounted() {
        this.initCode()
    }

};
</script>
<style lang="scss" scoped>
    .login-wrap{
        position: relative;
        width:100%;
        height:100%;
        /*background-image: url(../../assets/img/login-bg.jpg);*/
        background-image: url("../../static/images/index_bg.jpg");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        .login-Container{
            width: 1200px;
            position: relative;
            margin: 0 auto;
            height: 100%;
            .loginRight{
                position: absolute;
                right: -11%;
                width: 584px;
                height: 532px;
                top:50%;
                margin-top: -266px;
                .el-form-code{
                    margin: 0 auto;
                    width: 334px;
                    margin-bottom: 35px;
                  .el-input{
                    width: 170px;
                    float: left;
                  }
                  .el-form-pic{
                      float: right;
                      width: 152px;
                      height: 40px;
                      cursor: pointer;
                      img{
                          width: 152px;
                          height: 40px;
                      }
                  }
                }
                .el-form-bg{
                    text-align: center;
                    margin-top: 112px;
                }
                .el-form-text{
                    width: 334px;
                    margin: 0 auto;
                    margin-bottom:16px ;
                }
                .el-input /deep/{
                    .el-input-group__append, .el-input-group__prepend{
                        padding: 0 15px;
                    }
                    /deep/ .el-input-group__prepend{
                    .el-button{
                            i{
                                font-size: 24px;
                            }
                        }
                    }
                    /deep/ .el-input__inner{
                        background-color:#f5f7fa ;
                        border-left: 0;
                        padding: 0;
                        &:hover {
                             border-color: #DCDFE6;
                        }
                    }
                }

                .login-btn{
                    height: 52px;
                    line-height: 52px;
                    width: 334px;
                    text-align: center;
                    margin: 0 auto;
                    .el-button--primary{
                        background-color:#b71a00 ;
                        border-color:#b71a00 ;
                        border-radius: 25px;
                        span{
                           letter-spacing: 5px;
                        }
                    }
                }
               /deep/ .el-form-item.is-error .el-input__inner, /deep/ .el-form-item.is-error .el-input__inner:focus,/deep/ .el-form-item.is-error .el-textarea__inner,/deep/ .el-form-item.is-error .el-textarea__inner:focus,/deep/ .el-message-box__input input.invalid,/deep/ .el-message-box__input input.invalid:focus{
                    border-color: #DCDFE6;
                }
               /deep/ .el-form-item.is-success .el-input__inner,   /deep/ .el-form-item.is-success .el-input__inner:focus,  /deep/ .el-form-item.is-success .el-textarea__inner,  /deep/ .el-form-item.is-success .el-textarea__inner:focus{
                    border-color:#DCDFE6 !important;
                }
                /deep/  .el-input.is-active .el-input__inner,/deep/ .el-input__inner:focus{
                    border-color:#DCDFE6 !important;
                }

            }
        }

    }
    .ms-title{
        width:100%;
        line-height: 50px;
        text-align: center;
        font-size:20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }
    .ms-login{
        position: absolute;
        left:50%;
        top:50%;
        width:350px;
        margin:-190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255,255,255, 0.3);
        overflow: hidden;
    }
    .ms-content{
        padding: 30px 30px;
    }
    .login-btn{
        text-align: center;
    }
    .login-btn button{
        width:100%;
        height:36px;
        margin-bottom: 10px;
    }
    .login-tips{
        font-size:12px;
        line-height:30px;
        color:#fff;
    }
    #app  .loginRight /deep/ .el-form-item.is-success .el-input__inner,
    #app  .loginRight  /deep/ .el-form-item.is-success .el-input__inner:focus,
    #app .loginRight /deep/ .el-form-item.is-success .el-textarea__inner,
    #app .loginRight /deep/ .el-form-item.is-success .el-textarea__inner:focus {
        border-color: #DCDFE6 !important;
    }
    @media screen and(max-width: 1400px){
        .login-wrap .login-Container .loginRight{
            right: -8%;
        }
    }
</style>